.template-card {
  @apply p-5 h-full flex flex-col justify-between duration-300 cursor-pointer;

  transition-property: background, box-shadow;
  background: linear-gradient(
    to bottom,
    var(--token-color-surface-interactive),
    var(--token-color-surface-interactive)
  );

  &:hover {
    background: linear-gradient(
      to bottom,
      var(--token-color-surface-interactive),
      var(--token-color-surface-action)
    );
  }

  &.disabled {
    @apply cursor-default transition-none;

    background: var(--token-color-surface-faint);

    &:hover {
      background: var(--token-color-surface-faint);
    }
  }

  &--with-link {
    @apply pb-12;
  }
}
